<template>
  <div class="mask" v-if="show" @click="handleHide"></div>
  <div class="content__right" v-if="show">
    <div class="content__header">
      <span
        class="iconfont"
        v-html="change.result ? '&#xe673;' : '&#xe61e;'"
        @click="handleAllCheck(shopId)"
      ></span>
      <span class="text">全选</span>
      <span class="clear" @click="handleCleanAll(shopId)">清空购物车</span>
    </div>
    <template v-for="item in change.productList" :key="item._id">
      <div class="content__right__item">
        <span
          class="iconfont"
          v-html="item.check ? '&#xe673;' : '&#xe61e;'"
          @click="handleCheck(shopId, item._id)"
        ></span>
        <img :src="item.imgUrl" alt="" class="item__img" />
        <div class="item__info">
          <p class="info__tittle">{{ item.name }}</p>
          <p class="info__price">
            <span class="info__price__yen">&yen;</span>
            <span class="info__price__current">{{ item.price }}</span>
            <span class="info__price__origin">&yen;{{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="item__order">
          <span
            class="order__minus iconfont"
            @click="changeCart(shopId, item._id, item, -1)"
            >&#xe640;</span
          >
          <span class="order__num">{{ item.count }}</span>
          <span
            class="order__plus iconfont"
            @click="changeCart(shopId, item._id, item, 1)"
            >&#xe667;</span
          >
        </div>
      </div>
    </template>
  </div>
  <div class="cart">
    <div class="info">
      <img
        src="http://www.dell-lee.com/imgs/vue3/basket.png"
        alt=""
        class="img"
        @click="handleHide"
      />
      <span class="tag" v-if="change.total > 0">{{ change.total }}</span>
      <div class="check" v-if="change.total > 0">
        总计：<span class="check__icon">&yen;</span
        ><span class="check__price">{{ change.price }}</span>
      </div>
      <div class="check" v-if="change.total == 0">购物车是空的</div>
    </div>
    <div class="btn" v-if="change.show">
      <!-- 点击去结算进入“确认订单”页面 -->
      <router-link :to="{ path: `/Confirmation/${shopId}` }">
        去结算
      </router-link>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import { useCart } from "./useCart";

const useCartList = () => {
  const route = useRoute();
  const store = useStore();
  const shopId = route.params.id;
  let show = ref(false);
  // 设置计算属性change
  const change = computed(() => {
    let change = {
      result: true,
      total: 0,
      price: 0,
      productList: {},
      show: false,
    };
    // 如果商品的count值不为0则把该商品信息添加进change的productList属性
    for (let k in store.state.cartList[shopId]?.productList) {
      if (store.state.cartList[shopId]?.productList[k].count > 0) {
        change.productList[k] = store.state.cartList[shopId]?.productList[k];
      }
    }
    // 如果change.productList中有一个商品没有被选中则让change的result属性设置为false,否则将change.show设置为true;change.total属性为change.productList中所有被选中商品的count值的累加
    for (let k in change.productList) {
      if (!change.productList[k].check) {
        change.result = false;
      } else {
        change.show = true;
      }
        change.total += change.productList[k].count;
    }
    // 设置change.price为所有被选中商品的价格和数量成绩的累加
    for (let k in change.productList) {
      if (!change.productList[k].check) continue;
      change.price += change.productList[k].count * change.productList[k].price;
    }
    change.price = change.price.toFixed(2);
    // 如果change.total=0，即被选中的商品的总和为0，则把‘购物车’隐藏
    if (change.total === 0) {
      show.value = false;
    }
    console.log(change)
    return change;
  });
  // const allCheck = computed(() => {
  //   const productList = store.state.cartList[shopId]?.productList;
  //   let result = true;
  //   for (let k in productList) {
  //     if (productList[k].count > 0 && !productList[k].check) {
  //       result = false;
  //     }
  //   }
  //   return result;
  // });
  // const total = computed(() => {
  //   const productList = store.state.cartList[shopId]?.productList;
  //   let count = 0;
  //   if (productList) {
  //     for (let i in productList) {
  //       count += productList[i].count;
  //     }
  //   }
  //   return count;
  // });
  // const price = computed(() => {
  //   const productList = store.state.cartList[shopId]?.productList;
  //   let all = 0;
  //   if (productList) {
  //     for (let i in productList) {
  //       if (!productList[i].check) continue;
  //       all += productList[i].count * productList[i].price;
  //     }
  //   }
  //   return all.toFixed(2);
  // });
  // const useShopInfo = computed(() => {
  //   const products = store.state.cartList[shopId]?.productList;
  //   return products;
  // });
  // 点击“勾选”按钮执行store中的changeChecked方法
  const handleCheck = (shopId, productId) => {
    store.commit("changeChecked", { shopId, productId });
  };
  // 点击‘清除购物车’按钮执行store中的clearChecked方法
  const handleCleanAll = (shopId) => {
    store.commit("clearChecked", { shopId });
    show.value = false;
  };
  // 点击‘全选’按钮执行store中的checkAll方法
  const handleAllCheck = (shopId) => {
    store.commit("checkAll", { shopId });
  };
  // 点击‘菜篮子’图标按钮，显示或隐藏购物车
  const handleHide = () => {
    show.value = !show.value;
  };
  return {
    change,
    shopId,
    handleCheck,
    handleCleanAll,
    handleAllCheck,
    handleHide,
    show,
  };
};

export default {
  name: "Cart",
  setup() {
    const {
      change,
      shopId,
      handleCheck,
      handleCleanAll,
      handleAllCheck,
      show,
      handleHide,
    } = useCartList();
    const { changeCart } = useCart();
    return {
      change,
      changeCart,
      shopId,
      handleCheck,
      handleCleanAll,
      handleAllCheck,
      show,
      handleHide,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
@import "../../style/mixins";
p {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.cart {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  border-top: 1px solid $content-bgcolor;
  z-index: 2;
  background-color: #fff;
  .info {
    width: 2.77rem;
    display: flex;
    position: relative;
    .img {
      width: 0.28rem;
      height: 0.26rem;
      margin: 0.11rem 0.32rem 0 0.24rem;
    }
    .tag {
      position: absolute;
      top: 0;
      left: 0.4rem;
      width: 0.2rem;
      height: 0.2rem;
      font-size: 0.16rem;
      line-height: 0.2rem;
      border-radius: 50%;
      background-color: $content-highlightcolor;
      text-align: center;
      color: #fff;
      transform: scale3d(0.5, 0.5, 0.5);
    }
    .check {
      font-size: 0.12rem;
      line-height: 0.49rem;
      color: $content-fontcolor;
      span {
        font-size: 0.18rem;
        color: $content-highlightcolor;
      }
    }
  }
  .btn {
    flex: 1;
    background-color: $btn-ligjtbgcolor;
    font-size: 0.14rem;
    color: #fff;
    line-height: 0.49rem;
    text-align: center;
  }
}
.content__right {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  background-color: #fff;
  z-index: 2;
  .content__header {
    height: 0.5rem;
    box-sizing: border-box;
    border-bottom: 1px solid $content-bgcolor;
    position: relative;
    text-align: center;
    .iconfont {
      position: absolute;
      color: $btn-bgcolor;
      font-size: 0.19rem;
      left: 0.18rem;
      top: 0.15rem;
    }
    .text {
      position: absolute;
      font-size: 0.14rem;
      color: $content-fontcolor;
      top: 0.17rem;
      left: 0.46rem;
    }
    .clear {
      position: absolute;
      font-size: 0.14rem;
      color: $content-fontcolor;
      top: 0.17rem;
      right: 0.18rem;
    }
  }
  .content__right__item {
    padding-top: 0.08rem;
    padding-bottom: 0.12rem;
    display: flex;
    height: 0.46rem;
    position: relative;
    .iconfont {
      color: $btn-bgcolor;
      margin-top: 0.13rem;
      font-size: 0.19rem;
      margin-left: 0.18rem;
    }
    .item__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-left: 0.16rem;
      margin-right: 0.16rem;
    }
    .item__info {
      overflow: hidden;
      .info__tittle {
        height: 0.2rem;
        line-height: 0.2rem;
        font-weight: bold;
        font-size: 0.14rem;
        color: $content-fontcolor;
        margin-bottom: 0.06rem;
        @include single-ellipsis;
      }
      .info__price {
        &__yen {
          font-size: 0.12rem;
          color: $content-highlightcolor;
        }
        &__current {
          font-size: 0.14rem;
          line-height: 0.2rem;
          color: $content-highlightcolor;
          margin-right: 0.06rem;
        }
        &__origin {
          font-size: 0.12rem;
          line-height: 0.2rem;
          color: #999;
        }
      }
    }
    .item__order {
      position: absolute;
      bottom: 0.12rem;
      right: 0.18rem;
      .order__minus,
      .order__plus {
        font-size: 0.2rem;
        margin-left: 0;
      }
      .order__minus {
        color: #666;
        margin-right: 0.1rem;
      }
      .order__plus {
        color: $btn-bgcolor;
      }
      .order__num {
        display: inline-block;
        width: 0.16rem;
        text-align: center;
        margin-right: 0.1rem;
        color: $content-fontcolor;
        font-size: 0.14rem;
        line-height: 0.2rem;
      }
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
</style>